import {
  Form,
  Input,
  Button,
  Table,
  Popconfirm,
  Space,
  Pagination,
  message,
} from "antd";
import "./Vehicle_entry_record.scss";
import { useEffect, useState } from "react";
import getLocalTime from "../../utils/getLocalTime";
import http from "../../utils/http";
import store from "../../store/index";
// import ExportJsonExcel from "js-export-excel";//导出excel
const Vehicle_entry_record = () => {
  const [form] = Form.useForm();
  let [dataList, setData] = useState([]);

  // 转换函数
  function trans(v) {
    for (let i = 0; i < v.length; i++) {
      v[i].creaTime = getLocalTime(v[i].creaTime);

      if (v[i].cinfClass == 0) {
        v[i].cinfClass = "临时车";
      } else if (v[i].cinfClass == 1) {
        v[i].cinfClass = "包月车";
      } else {
        v[i].cinfClass = "园区车";
      }
    }
    return v;
  }
  //查询
  const search = () => {
    let value = form.getFieldsValue(true);
    console.log(value);
    http({
      url: "/car-record/carRecordVoList",
      params: {
        // "creaTime.year": "2022",
        creaTime: value.creaTime ? value.creaTime : "",
        cinfMark: value.cinfMark ? value.cinfMark : "",
      },
    }).then((res) => {
      console.log(res);
      if (res.code == 200) {
        setData(trans(res.data.data));
        store.tangxiaoyun.count = res.data.count;
        store.tangxiaoyun.current = 1;
      } else {
        message.error({
          content: "请输入正确的查询数据",
          className: "custom-class",
          style: {
            marginTop: "20vh",
          },
        });
      }
    });
  };
  //导出
  const LeadOut = () => {
    // console.log(cinfMark, creaTime);
    http({
      url: "/car-record/downCarRecord",
    }).then((res) => {
      console.log(res);
    });
  };
  //重置
  const resize = () => {
    form.resetFields();
    http({
      url: "/car-record/carRecordVoList",
    }).then((res) => {
      if (res.code == 200) {
        setData(trans(res.data.data));
        store.tangxiaoyun.current = 1;
        store.tangxiaoyun.count = res.data.count;
      }
    });
  };

  useEffect(() => {
    http({
      url: "/car-record/carRecordVoList",
    }).then((res) => {
      console.log(res.data);
      setData(trans(res.data.data));
      store.tangxiaoyun.count = res.data.count;
      store.tangxiaoyun.current = 1;
    });
  }, []);

  function cancel(e) {}

  // 删除
  function confirm(b) {
    let arr = new Array();
    arr.push(b.crec_id);

    http({
      url: "/car-record/deleteRecordVo",
      method: "post",
      data: arr,
    }).then((res) => {
      console.log(res);
      if (res.code == 200) {
        message.success({
          content: "删除成功",
          className: "custom-class",
          style: {
            marginTop: "20vh",
          },
        });

        http({
          url: "/car-record/carRecordVoList",
        }).then((res) => {
          setData(trans(res.data.data));
        });
      }
    });
  }
  const columns = [
    {
      title: "车辆号码",
      dataIndex: "cinfMark",
      key: "cinfMark",
    },
    {
      title: "车辆型号",
      dataIndex: "cinfType",
      key: "cinfType",
    },
    {
      title: "车主姓名",
      dataIndex: "ownerName",
      key: "ownerName",
    },
    {
      title: "联系方式",
      dataIndex: "ownerPhone",
      key: "ownerPhone",
    },
    {
      title: "车辆类型",
      dataIndex: "cinfClass",
      key: "cinfClass",
    },
    {
      title: "进出方向",
      dataIndex: "creaIoName",
      key: "cinfMark",
    },
    {
      title: "进出时间",
      dataIndex: "creaTime",
      key: "creaTime",
    },

    {
      title: "操作",
      dataIndex: "operation",
      render: (text, record) => (
        <Space size="middle">
          <Popconfirm
            title="确定要删除吗?"
            onConfirm={() => {
              confirm(record);
            }}
            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <a href="/">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
      let num2 = selectedRows.map((item) => {
        return item.key;
      });
      console.log(num2);
      //用接口实现批量删除
      // http({
      //     url: '/device/deviceDelete',
      //     method: 'post',
      //     data: num2
      // }).then((res) => {
      //     console.log(res);
      //     //如果删除成功，再次获取table数据，重新渲染
      //     if (res.code == 200) {
      //         setTimeout(() => {
      //             http({
      //                 url: '/device/deviceInformation',
      //                 method: 'post'
      //             }).then((res) => {
      //                 console.log(res);
      //                 if (res.code === 200) {
      //                     show(res.data.deviceInformationVoList)
      //                 }
      //             })
      //         }, 3000);

      //     }
      // })
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === "Disabled User",
      // Column configuration not to be checked
      name: record.name,
    }),
  };
  // 分页
  const pageChange = (current, size) => {
    store.tangxiaoyun.current = current;
    console.log(current, size);
    store.tangxiaoyun.current = current;

    let value = form.getFieldsValue(true);
    http({
      url: "/car-record/carRecordVoList",
      params: {
        current: current,
        size: size,
        creaTime: value.creaTime ? value.creaTime : "",
        cinfMark: value.cinfMark ? value.cinfMark : "",
      },
    }).then((res) => {
      if (res.code == 200) {
        setData(trans(res.data.data));
        console.log(dataList);
      }
    });
  };
  return (
    <div className="roleContent">
      <Form
        form={form}
        name="horizontal_login"
        layout="inline"
        className="title"
      >
        <Form.Item name="username">
          <div className="kuai">
            <span></span>
            <span>车辆进出记录</span>
          </div>
        </Form.Item>
        <Form.Item className="btn">
          <div>
            <Button className="cha" type="primary" onClick={LeadOut}>
              导出
            </Button>
            <Button className="resize" onClick={resize} type="primary">
              批量删除
            </Button>
          </div>
        </Form.Item>
      </Form>
      <div className="biao">
        <Form
          form={form}
          name="horizontal_login"
          layout="inline"
          className="Role"
        >
          <Form.Item name="cinfMark" label="车辆号码">
            <Input placeholder="请输入车辆号码" allowClear="true" />
          </Form.Item>
          <Form.Item name="creaTime" label="进出时间">
            <Input type="date" placeholder="请选择进出时间" />
          </Form.Item>

          <Form.Item className="btn">
            <div>
              <Button className="cha" type="primary" onClick={search}>
                查询
              </Button>
              <Button className="resize" onClick={resize} type="primary">
                重置
              </Button>
            </div>
          </Form.Item>
        </Form>
        <Table
          className="table1"
          rowSelection={{
            ...rowSelection,
          }}
          columns={columns}
          dataSource={dataList}
          pagination={false}
        />

        <Pagination
          className="page"
          defaultCurrent={1}
          current={store.tangxiaoyun.current}
          total={store.tangxiaoyun.count}
          onChange={pageChange}
        />
      </div>
    </div>
  );
};

export default Vehicle_entry_record;
